<template>
  <!-- <v-container> -->
  <v-container
    style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 返回按钮 -->
    <v-row class="green mt-n3">
      <v-col>
        <v-btn :to="{name:'PublicBenefit'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">公 益 详 情</h3>
      </v-col>
      <v-col></v-col>
    </v-row>

    <!-- 图片 -->
    <v-row>
      <!-- gradient：渐变，两个rgba分别代表由上到下和由下到上，四位数字分别是red(0-255)、green(0-255)、blue(0-255)，比例(0-1[0、0.1、0.2……   可简写为.1、.2……])，to bottom表示强制将渐变变成由底部往顶部 -->
      <!-- gradient="to bottom, rgba(0,0,0,0), rgba(0,0,0,0.3)" -->
      <!-- <v-card class="mt-3" flat>
        <v-img
          src="../assets/绿色公益助力.jpg"
          height="200px"
          contain
        >
        </v-img>
      </v-card> -->

        <v-img
          src="../assets/绿色公益助力.jpg"
          height="200px"
        >
        </v-img>

    </v-row>

    <!-- 进度显示部分 -->
    <!-- style="position:absolute;top:80px;left:70px;" -->
    <v-row class="">
      <v-col cols="8">
        <v-progress-linear class="mt-3" v-model="valueDeterminate" color="red"></v-progress-linear>
      </v-col>
      <v-col class="mx-n2" cols="4">
        <span>{{score}}/100000</span>
      </v-col>
    </v-row>

    <!-- 文字介绍部分 -->
    <div>
      <p style="text-align:center;color:black;font-size:20px;">绿色公益助力</p>
      <p style="text-align:center;color:black;font-size:15px;">第一期</p>
      <p style="text-indent:2em;">
        <b style="font-size:18px;">草原</b>是地球上分布最广的植被类型，有“地球皮肤”的美称，有着独一无二的生态、经济、社会功能，是生态屏障不可或缺的重要组成部分，既是绿色生态的底色，也是草原人民赖以生存的家园，更是牧区人民发展的最基本生产资料。
      </p>
      <v-img class="my-2" src="../assets/公益详情图一.jpg" height="190px" contain></v-img>
      <!-- <v-img src="../assets/公益详情图一.jpg" height="150px" contain></v-img> -->
      <p style="text-indent:2em;">
        由于气候变化、长期的过度开垦和过度放牧等原因，天然草原的沙化、退化现象变得越来越严重。裸露的荒漠正在取代茵茵绿草，世代传承的畜牧业面临严重威胁，每年春季沙尘暴肆虐，
      </p>
      <v-img class="my-2" src="../assets/公益详情图二.jpg" height="160px" contain></v-img>
      <!-- <v-img src="../assets/公益详情图二.jpg" height="150px" contain></v-img> -->
      <p>
        给草原人民的生活带来了巨大的影响，恶劣的生态环境让人们再难看到那一望无际的绿色。
      </p>
      <p class="my-n2" style="text-indent:2em;">
        为保护草原的生态稳定和实现草原生态的可持续发展，<b style="color:green;">本期绿色公益助力活动将混合种植驼绒藜、杂化苜蓿，蒙古冰草、沙打旺等 20 余种草本植物，</b>针对退化、沙化、盐碱化严重的天然草原及退耕还草的草地，通过免耕补播、松耙、切根、施肥、灌溉、围栏封育、人工种草等措施，进行生态修复，可显著提高当地的生态效益、经济效益、社会效益。
      </p>
    </div>
    <v-row justify="center">
      <div class="white--text mt-2">看不见我</div>
    </v-row>
    <v-row justify="center">
      <div class="white--text mt-2">看不见我</div>
    </v-row>


    <!-- 总捐献按钮 -->
    <div
      style="position:fixed;bottom:0px;left:0px;rigth:0px;height:56px;width:360px;"
      class="white"
    ></div>
    <v-btn
      width="300"
      height="36"
      rounded
      color="green"
      dark
      class="mt-6 font-weight-bold"
      @click="dialog = true"
      style="position:fixed;bottom:10px;left:30px;rigth:0px;overflow:scroll;"
    >捐赠可用绿色积分</v-btn>
    

    <!-- 积分捐献弹出界面（对话框） -->
    <v-row justify="center">
      <v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
        <v-card style="position:fixed;top:460px;overflow:scroll;">
          <v-toolbar dark color="green">
            <!-- <v-toolbar-title>积分捐献栏</v-toolbar-title> -->
            可用积分：{{allscore}}
            <v-spacer></v-spacer>
            <v-btn icon dark @click="dialog = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </v-toolbar>

          <div class="white--text">看不见我</div>
          
          <div class="text-center">
            <v-chip class="ma-3">10积分</v-chip>
            <v-chip class="ma-3">20积分</v-chip>
            <v-chip class="ma-3">50积分</v-chip>
            <v-chip class="ma-2" v-if="active1" @click="test1()">100积分</v-chip>
            <v-chip class="ma-2" v-if="active2" @click="test2()" color="green">100积分</v-chip>
            <v-chip class="ma-2">自定义</v-chip>
          </div>
          <span>
            <v-btn style="position:relative;top:20px;left:250px;color:green;" small outlined rounded @click="exchange()">确定捐赠</v-btn>
          </span>
        </v-card>
      </v-dialog>
    </v-row>

  </v-container>
</template>

<script>
export default {
  data() {
    return {
      dialog: false,
      allscore: 200,
      score: 50000,
      valueDeterminate: 50,
      active1: true,
      active2: false,
    };
  },
  methods: {
    exchange() {
      if(this.allscore>0){
        this.dialog = false;
        this.allscore -= 100;
        this.score += 100;
        this.valueDeterminate += 0.1;
        this.test2();
      }
    },
    test1 (){
      this.active1 = false;
      this.active2 = true;
    },
    test2 (){
      this.active1 = true;
      this.active2 = false;
    }
  }
};
</script>

<style scoped>
</style>